<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询操作</title>
    <script>
        function f1(){
            // 根据id属性查找对应节点,返回与元素的id属性值与当前方法参数一致的元素
            // 由于id属性不能重复,此时返回的是一个元素
            let btn1 = document.getElementById("btn1");
            console.log(btn1);
        }
        function f2(){
            // 根据name属性查找节点,name属性可以重复,因此返回的是一个节点集合
            let btns = document.getElementsByName("btn");
            console.log(btns);
        }
        function f3(){
            let btns = document.getElementsByTagName("button");
            console.log(btns);
        }
        function f4(){
            // 查找符合选择器规则的元素,只返回匹配到的第一个
            // let c1 = document.querySelector(".c1");
            // 查找符合选择器规则的元素,返回匹配到的所有元素的集合
            let c1 = document.querySelectorAll(".c1")
            console.log(c1);
        }
    </script>
</head>
<body>
<button id="btn1" onclick="f1()" name="btn" class="c1">根据id属性查找对应节点</button><br>
<button id="btn2" name="btn" onclick="f2()">根据name属性查找对应节点</button><br>
<button onclick="f3()" class="c1">根据标签名查找对应节点</button><br>
<button onclick="f4()">根据选择器查找对应节点</button><br>
<a href="javascript:;" name="btn" class="c1">超链接</a><br>
</body>
</html>